<template>
	<div class="block">
		<h5>行政区域安装统计</h5>
		<div class="item title">
			<p v-for="item in tableData.column" :key="item">
				{{ item }}
			</p>
		</div>
		<div class="item-wrap">
			<div
				class="item"
				@click="onClick(item)"
				v-for="(item, index) in tableData.list"
				:key="index"
			>
				<p>{{ index + 1 }}</p>
				<p>{{ item.name }}</p>
				<p>{{ item.zcount }}</p>
				<p>{{ item.xggdjsbpds || 0 }}</p>
				<p>{{ `${item.value || 0}%` }}</p>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, reactive, onMounted, defineProps, defineEmits } from 'vue'
import { gdjsbtbar } from '@/service/village'

const props = defineProps({
	date: {
		type: Object,
		default: () => []
	}
})

const emits = defineEmits(['toPage'])

const tableData = reactive({
	column: [
		'序号',
		'行政区域',
		'房屋总栋数',
		'安装房屋栋数',
		'安装率',
	],
	list: []
})

const getData = async () => {
	const result = await gdjsbtbar({
		date: props.date
	})
	tableData.list = (result?.data?.data || result?.data)?.map(item => {
		return {
			...item,
			name: item.name || item.village || item.town || item.xzq,
			code: item.code || item.villagedm || item.towndm || item.xzqdm
		}
	})
}

const onClick = (record) => {
	emits('toPage', {
		record,
		type: 3
	})
}

onMounted(() => {
	getData()
})
</script>

<style scoped lang="less">
.block {
	margin: 24px;
	.item-wrap {
		height: 300px;
		overflow: auto;
		.item:nth-of-type(1) {
			border-top: 0;
		}
	}
	.title {
		p {
			font-weight: 600;
		}
	}
	.item {
		display: flex;
		min-height: 40px;
		line-height: 40px;
		border: 1px solid var(--border-color);
		border-top: 0;
		box-sizing: border-box;
		&:nth-of-type(1) {
			border-top: 1px solid var(--border-color);
		}
		p {
			flex: 1;
			padding: 12px;
			border-left: 1px solid var(--border-color);
			&:nth-of-type(1) {
				flex: none;
				width: 80px;
				border-left: 0;
			}
		}
	}
}
</style>
